<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人资料 - 校园论坛 - 相思湖学院</title>
<link rel="shortcut icon" href="static/image/logo_little.png">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" >
<link rel="stylesheet" type="text/css" href="static/css/cropper.min.css" >
<link rel="stylesheet" type="text/css" href="static/css/top.css" >
<link rel="stylesheet" type="text/css" href="static/css/userinfo.css" >

<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/js/cropper.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
</head>
<body>
	<div class="top">
		<img class="logo" alt="相思湖学院论坛" src="static/image/logo.png">
		<form action="search" method="post" onsubmit="return isEmpty()">
			<input  id="search" name="search" type="text" value="" placeholder="请输入搜索内容">
		    <button type="submit" class="submit">搜索</button>
		</form>
		<script type="text/javascript">
			function isEmpty() {
				if(document.getElementById("search").value == "") {
					$('<div>').appendTo('body').addClass('alert alert-info').html("请输入搜索内容").show().delay(1500).fadeOut();
					return false;
				}
				return true;
			}
		</script>
		<c:if test="${user != null }">
			<div class="user">
				<span><a style="font-weight: 800;color: black;" href="userinfo">${user.username }</a></span>
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">我的<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="user?id=${user.id }&selected=mytopic">帖子</a></li>
						<!-- <li><a href="#">收藏</a></li>
						<li><a href="#">好友</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="userinfo">设置</a></span>
				<!-- <span>|</span>
				<span><a href="#">消息</a></span> -->
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">提醒<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="notice">消息</a></li>
						<!-- <li><a href="#">新听众</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="exit">退出</a></span>
				<c:if test="${user.avatar != null && user.avatar != '' }">
					<img class="avatar" src="${user.avatar }">
				</c:if>
				<c:if test="${user.avatar == null || user.avatar == '' }">
					<img class="avatar" src="static/image/noavatar.jpg">
				</c:if>
			</div>
		</c:if>
		<c:if test="${user == null }">
			<div class="visitor">
				<a href="ps.login">登陆</a>
				<a href="${path }/register.jsp">注册</a>
			</div>
		</c:if>
	</div>
	<div class="contral">
		<div class="title">
			<a href="forum" class="nvhm" title="首页"></a>
			<em></em>
			<a>设置</a>
			<em></em>
			<a>个人资料</a>
		</div>
		<div class="mn">
			<table  style="width: 100%;">
				<tr>
					<th class="left" valign="top">
						<h1>设置</h1>
						<a id="container_a" href="javascript:;" onclick="showWindow('container')">修改头像</a>
						<a id="userinfo_a" class="selected" href="javascript:;" onclick="showWindow('userinfo')">个人资料</a>
						<a id="updatepassword_a" class="" href="javascript:;" onclick="showWindow('updatepassword')">密码安全</a>
					</th>
					<td valign="top">
						<div id="userinfo">
							<form action="" style="padding: 20px;">
								<c:if test="${user.avatar != null && user.avatar != '' }">
									<img class="avatar" src="${user.avatar }">
								</c:if>
								<c:if test="${user.avatar == null || user.avatar == '' }">
									<img class="avatar" src="static/image/noavatar.jpg">
								</c:if>
								<strong style="line-height: 50px;">${user.username }</strong>
								<p style="color: #999;">
									用户组&nbsp;&nbsp;&nbsp;
									<c:if test="${user.role == 0 }"><strong style="text-decoration: underline;">普通用户</strong></c:if>
									<c:if test="${user.role == 1 }"><strong style="text-decoration: underline;">版主</strong></c:if>
									<c:if test="${user.role == 2 }"><strong style="text-decoration: underline;">总版主</strong></c:if><br>
									注册时间&nbsp;&nbsp;&nbsp;${user.registertime }
									<c:if test="${user.isbanned == 1 }">
										<br> <strong>状态&nbsp;&nbsp;&nbsp;${user.begintime } 至 ${user.endtime } 禁止登陆</strong>
									</c:if>
									<c:if test="${user.issilenced == 1 }">
										<br> <strong>状态&nbsp;&nbsp;&nbsp;${user.begintime } 至 ${user.endtime } 禁止发言</strong>
									</c:if>
								</p>
							</form>
						</div>
						<div id="updatepassword" class="updatepassword" style="display: none;">
							<form action="updatepassword" method="post" onsubmit="return checksubmit()">
								<input type="hidden" name="id" value="${user.id }">
								<input type="hidden" name="username" value="${user.username }">
								旧密码：<input type="text" id="oldpassword" name="oldpassword"
									onfocus="userOnfocus(this.name)" onblur="userOnblur(this.name)"
					 				onpaste="return false" ondragenter="return false" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
								<i id="tip_oldpassword" style="display: none;"></i>
								<kbd id="chk_oldpassword"></kbd><br/>
								新密码：<input type="text" id="password" name="password"
									onfocus="userOnfocus(this.name)" onblur="userOnblur(this.name)"
					 				onpaste="return false" ondragenter="return false" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
								<i id="tip_password" style="display: none;">密码长度为9-16个字符，只能包含字母、数字和下划线</i>
								<kbd id="chk_password"></kbd><br/>
								确认新密码：<input type="text" id="againpsd" name="againpsd" style="margin-left: 10px;"
									onfocus="userOnfocus(this.name)" onblur="userOnblur(this.name)"
					 				onpaste="return false" ondragenter="return false" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
								<i id="tip_againpsd" style="display: none;">密码长度为9-16个字符，只能包含字母、数字和下划线</i>
								<kbd id="chk_againpsd"></kbd><br/>
								<input class="submit" type="submit" value="提交" style="margin-left: 95px;">
								<span style="color: red;">${admitUpdatePassword }</span>
							</form>
						</div>
						<div id="container" class="container" style="display: none; width: 100%;">
							<div>
								<h3>当前我的头像：</h3>
								如果您还没有设置自己的头像，系统会显示为默认头像，您需要自己上传一张新照片来作为自己的个人头像<br>
								<c:if test="${user.avatar != null && user.avatar != '' }">
									<img class="avatar" src="${user.avatar }">
								</c:if>
								<c:if test="${user.avatar == null || user.avatar == '' }">
									<img class="avatar" src="static/image/noavatar.jpg">
								</c:if>
							</div>
							<div>
								<div style="margin-left: 10px; margin-top: 10px;">
									<h3>设置我的新头像</h3>
									请选择一个新照片进行上传编辑。<br><br>
									<label for="input" class="btn btn-danger" id="">
										<span>选择图片</span>
										<input type="file" id="input" class="sr-only">
									</label>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6 col-sm-offset-2 ib avatarbg" style="margin-top: 10px; width: 300px; height: 230px;">
									<img src="" id="photo">
								</div>
								<div class="ib">
									<div class="ib">
										<p>预览(100*100)：</p>
										<div class="img-preview avatarbg"></div>
										<!-- <button class="btn btn-primary" onclick="crop()">裁剪图片</button> -->
										<button class="btn btn-primary" onclick="sendPhoto()">提交</button>
									</div>
									<!-- <div class="ib">
										<p>结果：</p>
										<img class="avatarbg" src="" alt="" id="result">
									</div> -->
								</div>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var selectedId = "${selectedId}";
			if(selectedId != "") {
				document.getElementById("userinfo_a").className = "";
				document.getElementById(selectedId + "_a").className = "selected";
				
				document.getElementById("userinfo").style.display = "none";
				document.getElementById(selectedId).style.display = "";
			}
			
			function showWindow(id) {
				
				document.getElementById("userinfo_a").className = "";
				document.getElementById("updatepassword_a").className = "";
				document.getElementById("container_a").className = "";
				document.getElementById(id + "_a").className = "selected";
				
				document.getElementById("userinfo").style.display = "none";
				document.getElementById("updatepassword").style.display = "none";
				document.getElementById("container").style.display = "none";
				document.getElementById(id).style.display = "";
			}
			
		</script>
		<!-- 密码修改 -->
		<script type="text/javascript">
			function userOnfocus(id) {
				document.getElementById("tip_"+id).style.display = "inline-block";
				document.getElementById("chk_"+id).innerHTML = "";
			}
			function userOnblur(id) {
				document.getElementById("tip_"+id).style.display = "none";
				var value = document.getElementById(id).value;
				if(id == "password") {
					if(value == "") {
						document.getElementById("chk_"+id).innerHTML = "请输入新密码";
						return false;
					} else if(value.length < 9 || value.length > 16){
						document.getElementById("chk_"+id).innerHTML = "密码长度为9-16个字符，只能包含字母、数字和下划线";
						return false;
					}
					return true;
				} else if(id == "againpsd") {
					if(value == "") {
						document.getElementById("chk_"+id).innerHTML = "请再次输入新密码";
						return false;
					} else if(value != document.getElementById('password').value) {
						document.getElementById("chk_"+id).innerHTML = "两次输入的密码不一致";
						return false;
					}
					return true;
				} else if(id = "oldpassword") {
					if(value == "") {
						document.getElementById("chk_"+id).innerHTML = "请输入旧密码";
						return false;
					} 
					return true;
				}
			}
			function checksubmit() {
				if(userOnblur("oldpassword") & userOnblur("password") & userOnblur("againpsd")) {
					return true;
				} else {
					return false;
				}
			}
		</script>
		<!-- 更换头像 -->
		<script type="text/javascript">
			// 修改自官方demo的js
	        var initCropper = function (img, input){
	            var $image = img;
	            var options = {
	                aspectRatio: 1, // 纵横比
	                viewMode: 2,
	                preview: '.img-preview' // 预览图的class名
	            };
	            $image.cropper(options);
	            var $inputImage = input;
	            var uploadedImageURL;
	            if (URL) {
	                // 给input添加监听
	                $inputImage.change(function () {
	                    var files = this.files;
	                    var file;
	                    if (!$image.data('cropper')) {
	                        return;
	                    }
	                    if (files && files.length) {
	                        file = files[0];
	                        // 判断是否是图像文件
	                        if (/^image\/\w+$/.test(file.type)) {
	                            // 如果URL已存在就先释放
	                            if (uploadedImageURL) {
	                                URL.revokeObjectURL(uploadedImageURL);
	                            }
	                            uploadedImageURL = URL.createObjectURL(file);
	                            // 销毁cropper后更改src属性再重新创建cropper
	                            $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
	                            $inputImage.val('');
	                        } else {
	                          window.alert('请选择一个图像文件！');
	                      }
	                  }
	              });
	            } else {
	                $inputImage.prop('disabled', true).addClass('disabled');
	            }
	        }
	        /* var crop = function(){
	            var $image = $('#photo');
	            var $target = $('#result');
	            $image.cropper('getCroppedCanvas',{
	                width:300, // 裁剪后的长宽
	                height:300
	            }).toBlob(function(blob){
	                // 裁剪后将图片放到指定标签
	                $target.attr('src', URL.createObjectURL(blob));
	            });
	        } */
	        var sendPhoto = function () {
	            // 得到PNG格式的dataURL
	            var photo = $('#photo').cropper('getCroppedCanvas', {
	                width: 300,
	                height: 300
	            }).toDataURL('image/png');

	            $.ajax({
	                url: 'uploadAvatar', // 要上传的地址
	                type: 'post',
	                data: {
	                    'imgData': photo,
	                    'id': '${user.id}'
	                },
	                dataType: 'json',
	                success: function (data) {
	                    /* if (data.status == 0) {
	                        // 将上传的头像的地址填入，为保证不载入缓存加个随机数
	                        $('.user-photo').attr('src', '头像地址?t=' + Math.random());
	                        $('#changeModal').modal('hide');
	                    } else {
	                        alert(data.info);
	                    } */
	                	window.location.href = data.address;
	                }
	            });
	        }
	        $(function(){
	            initCropper($('#photo'),$('#input'));
	        });
		</script>
	</div>
</body>
</html>